@ms2-path: "~mapstore/web/client/themes/default";

@import "@{ms2-path}/icons.less";
@import "@{ms2-path}/less/mapstore.less";
@import "@{ms2-path}/variables.less";

@ms-font-family-serif: @gn-font-family-serif;
@ms-font-family-monospace: @gn-font-family-monospace;
@ms-font-family-sans-serif: @gn-font-family-sans-serif;
@ms-font-family-base: @gn-font-family-base;

@icon-size: 24px;
@square-btn-size: 40px;

@icon-size-md: 15px;
@square-btn-medium-size: 30px;

// **************
// Theme
// **************

#gn-components-theme(@theme-vars) {
    .ms-side-panel .ms-header.ms-primary .row:first-child {
        .color-var(@theme-vars[main-color]);
        .background-color-var(@theme-vars[main-bg]);
        .square-button {
            .color-var(@theme-vars[main-color], true);
            .background-color-var(@theme-vars[main-bg], true);
        }
    }
}

// **************
// Layout
// **************

.close {
    font-size: 16px;
    opacity: 1;
}
.modal-header .close {
    margin-top: 0;
}

#drawer-menu-button {
    z-index: 5;
}
#mapstore-navbar-container {
    z-index: 10;
}
#navigationBar-container {
    z-index: 5;
}
.timeline-plugin {
    z-index: 5;
}

// reduce search bar height in resource view
.MapSearchBar .input-group {
    .searchInput {
        min-height: 40px;
    }
}

.gn-embed {
    // fix position of dashboard full screen button
    .widget-container .mapstore-widget-card .mapstore-widget-header .widget-icons .btn-group button {
        top: 0;
    }
}

.dashboard-editor {
    height: 100%;
}

#map {
    top: 0;
}

// display a margin on search bar and TOC buttons
// to get a floating effect in map and layer viewer
#navigationBar .mapToolbar,
#drawer-menu-button,
#mapstore-navbar-container,
.background-plugin-position {
    margin: 4px;
}
#navigationBar .mapToolbar,
.background-plugin-position {
    bottom: 30px;
    margin-bottom: 35px;
}
.background-preview-button {
    margin: 0 !important;
}
// hide di edit, remove and add buttons
// because these functionalities are not supported on the geonode catalog
.background-preview-button > .btn-group,
.background-tool-buttons {
    display: none;
}

// mapstore compute this value using @square-btn-size and @font-size-h4
// in this specific context those value have different uom
// we should override this to ensure to use rem and have the correct value for padding
.ms-resizable-modal > .modal-content > .modal-header {
    height: auto;
    padding: 0.6rem;
}
.modal-header {
    height: auto;
    padding: 0.6rem;
}
// the input small size is not computed correctly due to rem value
// this override will fix the attribute table filter inputs
.input-sm {
    height: 1.75rem;
}

// fix share modal style
.gn-share-modal {
    overflow: visible;
    .modal-dialog,
    .ms-resizable-modal > .modal-content > .modal-body > div {
        overflow: visible;
    }
    .col-md-4 {
        padding-left: 0;
        padding-right: 0;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    .modal-body {
        margin: 8px;
    }
    .modal-footer {
        display: none;
    }
}

.gn-simple-dialog {
    .ms-resizable-modal > .modal-content > .modal-header {
        height: auto;
    }
    .ms-resizable-modal > .modal-content > .modal-header .modal-title .ms-title {
        text-overflow: initial;
        height: auto;
        line-height: initial;
        white-space: normal;
    }
}

// remove fixed height to display the complete text
.mapstore-side-card .ms-head {
    height: auto;
    min-height: 80px;
}

.mapstore-side-card.ms-sm .ms-head {
    height: auto;
    min-height: 40px;
}

// fix global spinner
div#mapstore-globalspinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    &.ms2-loading .sk-circle-wrapper {
        margin: auto !important;
    }
}

// height has an incorrect value in rem so we need to override it
.feature-grid-container .ms2-border-layout-body .react-grid-HeaderRow .react-grid-HeaderCell .rw-datetimepicker.rw-widget input {
    height: auto;
}

.ms-popover-overlay {
    z-index: 2000;
}

// show ellipsis if the title overflow the get feature info popup
.ms-map-popup .mapstore-identify-viewer .ms-identify-swipe-header-title {
    text-overflow: ellipsis;
    overflow: hidden;
}

#mapstore-map-footer-container {
    z-index: 1100;
}

// review drawer menu and toc style

#mapstore-drawermenu {
    .nav-content {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 100%;
        height: 100%;
        .navHeader {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            min-height: auto !important;
            height: auto !important;
        }
        .nav-body {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .panel,
        .panel-body,
        .panel-body > div {
            position: absolute;
            display: flex;
            flex-direction: column;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
        }
        
    }
    .mapstore-toc-head {
        height: auto !important;
    }
    .mapstore-toc-head-title-container {
        display: none;
    }
    .mapstore-toc {
        flex: 1;
        width: 100%;
        position: relative;
        .mapstore-layers-container {
            overflow: auto;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
}

.mapstore-query-builder .m-header {
    box-shadow: none;
}

.widgets-builder-header > .row > .text-center {
    display: flex;
    flex-direction: row-reverse;
    > span {
        padding: 0 !important;
        flex: 1;
    }
}

.ms-side-panel .ms-header {
    box-shadow: none;
}

// missing close symbol in geocss code editor picker
.ms-inline-widget-container {
    .btn.close:before {
        content: "X";
    }
    .btn.close:hover {
        color: #ffffff;
    }
}

// this override is needed to ensure the identify is correctly placed on close
// !important flag is needed to override inline style
#identify-container {
    width: 100% !important; 
    transform: unset !important;
}

// we need to override the styles of the widgets
// because we are using rem unit of measure inside geonode mapstore client
// to compute correctly we need to overrides the rules inside mapstore
.widget-container {
    .mapstore-widget-card {
        .setFontSize(16px);
        font-size: @fSize;
        .mapstore-widget-layer {
            .em(margin-top, 10);
            .em(margin-right, 10);
        }
        .mapstore-widget-header {
            font-size: @fSize;
            .em(height, 28);
            .widget-title {
                .setFontSize(14px);
                font-size: @fSize;
                .em(margin-left, 6);
            }
            .mapstore-info-popover .glyphicon {
                .setFontSize(14px);
                font-size: @fSize;
                .em(margin-top, 7);
                .em(left, 22);
            }
            .widget-icons {
                .em(height, 10);
                .em(margin-left, 4);
                .btn-group {
                    button {
                        .em(top, -8);
                        .em(padding-left, 4);
                        .em(padding-right, 4);
                    }
                }
            }
        }
        .react-grid-Grid {
            .react-grid-Header {
                .react-grid-HeaderCell {
                    .setFontSize(12px);
                    font-size: @fSize;
                    .em(padding, 4);
                    input {
                        .setFontSize(11px);
                        font-size: @fSize;
                        .em(height, 20);
                        .em(padding-top, 5);
                        .em(padding-right, 10);
                        .em(padding-bottom, 5);
                        .em(padding-left, 10);
                    }
                }
            }
            .react-grid-Viewport {
                .react-grid-Cell {
                    font-size: 12px;
                }
            }
        }
        .mapstore-widget-default-content {
            &.ql-editor {
                .setFontSize(12px);
                font-size: @fSize;
                .em(margin-top, 10);
                .em(margin-right, 10);
            }
        }
        .mapstore-widget-description {
            font-size: @fSize;
            .em(margin-top, 5);
            .em(margin-right, 5);
        }
        .mapstore-widget-options {
            .setFontSize(18px);
            font-size: @fSize;
            .em(margin-top, 4);
            .em(margin-right, 10);;
        }
        .widget-menu {
            .em(margin-top, -4);
            .em(margin-right, -8);
        }
        .widget-footer {
            .em(height, 30);
            .result-info {
                font-size: 12px;
                .em(margin, 5);
            }
        }
        .mapstore-widget-table {
            font-size: 12px;
        }
        .legend-widget {
            .setFontSize(12px);
            font-size: @fSize;
            .em(padding-right, 15);
            .em(padding-bottom, 15);
            .em(padding-left, 15);
            .widget-legend-toc {
                .em(margin-top, 10);
                .toc-default-layer-head {
                    .em(height, 44);
                    .em(padding-top, 14);
                    .em(padding-right, 14);
                    .em(border-bottom-width, 1);
                    .visibility-check{
                        &.glyphicon {
                            .em(margin-bottom, 10);
                            .em(margin-left, 10);
                        }
                    }
                    .toc-title {
                        .em(height, 15);
                        .em(margin-bottom, 5);
                        .em(margin-left, 5);
                        .em(width, 140);
                    }
                    .toc-legend-icon {
                        &.glyphicon {
                            .em(margin-right, 10);
                        }
                    }
                    .mapstore-slider {
                        .em(margin-top, -8);
                    }
                }
                .expanded-legend-view {
                    .em(margin-top, 15);
                }
            }
        }
        .map-widget-view {
            .widget-icons, .widget-title {
                .em(margin-bottom, 6);
            }
            .mapstore-widget-header {
                .mapstore-widget-options {
                    .em(margin-top, 4);
                    .em(margin-bottom, 4);
                    .map-switcher {
                        .em(width, 200);
                    }
                }
            }
        }
    }
}
